<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2020/11/24
  Time: 17:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%-- 静态包含 base标签、css样式、jQuery文件 --%>
<%
  String basePath = request.getScheme()
          + "://"
          + request.getServerName()
          + ":"
          + request.getServerPort()
          + request.getContextPath()
          + "/";
  pageContext.setAttribute("basePath",basePath);
%>
<link type="text/css" rel="stylesheet" href="static/css/style.css" >
<script type="text/javascript" src="static/script/jquery-1.7.2.js"></script>
<base href="<%=basePath%>">
<html>
  <head>
    <title>登录页面</title>
    <script type="text/javascript">
      function cambiar_login() {
        document.querySelector('.cont_forms').className = "cont_forms cont_forms_active_login";
        document.querySelector('.cont_form_login').style.display = "block";
        document.querySelector('.cont_form_sign_up').style.opacity = "0";

        setTimeout(function(){  document.querySelector('.cont_form_login').style.opacity = "1"; },400);

        setTimeout(function(){
          document.querySelector('.cont_form_sign_up').style.display = "none";
        },200);
      }

      function cambiar_sign_up(at) {
        document.querySelector('.cont_forms').className = "cont_forms cont_forms_active_sign_up";
        document.querySelector('.cont_form_sign_up').style.display = "block";
        document.querySelector('.cont_form_login').style.opacity = "0";

        setTimeout(function(){  document.querySelector('.cont_form_sign_up').style.opacity = "1";
        },100);

        setTimeout(function(){   document.querySelector('.cont_form_login').style.display = "none";
        },400);


      }



      function ocultar_login_sign_up() {

        document.querySelector('.cont_forms').className = "cont_forms";
        document.querySelector('.cont_form_sign_up').style.opacity = "0";
        document.querySelector('.cont_form_login').style.opacity = "0";

        setTimeout(function(){
          document.querySelector('.cont_form_sign_up').style.display = "none";
          document.querySelector('.cont_form_login').style.display = "none";
        },500);

      }



      $(function () {
          $(".r_username").blur(function () {
              var value = this.value();

              $.getJSON("http://localhost:8080/flower/pages/floda/userServlet","action=ajaxExistUsername&username"+username,function (data) {
                  if (data.existUsername){
                    $("span.errorMsg").text("用户名已存在")
                  }else {
                    $("span.errorMsg").text("用户名可用")
                  }
              });
          });
      })
    </script>



  </head>
  <body>

  <div class="cotn_principal">
    <div class="cont_centrar">
      <div class="cont_login">
        <div class="cont_info_log_sign_up">
          <div class="col_md_login">
            <div class="cont_ba_opcitiy">
              <h2>登录</h2>
              <p>热烈爱的宣言，铭记于心的约定爱这花儿般优雅的你</p>
              <button class="btn_login" onClick="cambiar_login()">登录</button>
            </div>
          </div>
          <div class="col_md_sign_up">
            <div class="cont_ba_opcitiy">
              <h2>注册</h2>
              <p>爱的誓言，执子之手，与子偕老美丽的邂逅 单纯而可爱</p>
              <button class="btn_sign_up" onClick="cambiar_sign_up()">注册</button>
            </div>
          </div>
        </div>
        </div>
        <div class="cont_back_info">
          <div class="cont_img_back_grey">
            <img src="img/po.jpg" alt="" /> </div>
        </div>
        <div class="cont_forms" >
          <div class="cont_img_back_">
            <img src="img/po.jpg" alt="" /> </div>

          <form action="userServlet" method="post">
            <input type="hidden" name="action" value="login">
            <div class="cont_form_login"> <a href="#" onClick="ocultar_login_sign_up()" ><i class="material-icons">&#xE5C4;</i></a>
            <h2>登录</h2>
            <input type="text" placeholder="请输入用户名" name="username"/>
            <input type="password" placeholder="请输入密码" name="password"/>
            <button class="btn_login" onClick="cambiar_login()">立即登录</button>
          </div>
          </form>

<%--          <span class="errorMsg" >--%>
<%--            ${ requestScope.msg }--%>
<%--          </span>--%>
          <form action="userServlet" method="post">
            <input type="hidden" name="action" value="regist">
          <div class="cont_form_sign_up"> <a href="#" onClick="ocultar_login_sign_up()"><i class="material-icons">&#xE5C4;</i></a>
            <h2>注册</h2>
            <input type="text" placeholder="请输入用户名" name="username" class="r_username"/>
            <input type="password" placeholder="请输入密码" name="password"/>
            <input type="text" placeholder="请输入您的真实姓名" name="name"/>
            <input type="text" placeholder="请输入联系方式" name="phone"/>
            <button class="btn_sign_up" onClick="cambiar_sign_up()">立即注册</button>
          </div>
          </form>


        </div>


      </div>
    </div>
  </div>


  <div style="text-align:center;">

  </div>
  </body>
</html>
